<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停图片放大提示效果</title>
<style type="text/css">
/*图库样式*/
#gallery {
	width:460px;
	height: 270px;
	margin: 0 auto;
	padding: 10px;
	background: #383131;
}

ul {
	list-style-type: none;
	position: absolute;
	width: 460px;
}

#gallery ul li {
	float: left;
	margin: 10px;
	background: white;
	height: 100px;
	width: 100px;
}

#gallery ul li:hover {
	border: 3px solid white;
	margin: 7px;
	cursor: pointer;
}

#gallery ul li img{
	height: 100px;
	width: 100px;
}
/* 工具提示的样式 */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
</style>

<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function(){
		var x = 10;
		var y = 20;
		$("a.tooltip").mouseover(function(e){
			this.myTitle = this.title;       //得到当前链接的titl，即标题
			this.title = "";
			var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
			var tooltip = "<div id='tooltip'> "+
			              "<img src='"+ this.href +"' alt='放大提示'/>"+
						  imgTitle+"</div>"; //新建一个id为tooltip的div元素
			$("body").append(tooltip);	     //元素内部包含一个img，用来显示图片并且显示标题，追加到body区
			$("#tooltip")                   //更改tooptip的顶部和左侧位置
				.css({
					"top": (e.pageY+y) + "px",
					"left":  (e.pageX+x)  + "px"
				}).show("fast");	       //使用show函数快速显示
		}).mouseout(function(){
			this.title = this.myTitle;
			$("#tooltip").remove();	        //当鼠标移出时，从body区删除该div元素
		}).mousemove(function(e){         //当鼠标移动时，调整div的位置位于鼠标箭头的下方
			$("#tooltip")
				.css({
					"top": (e.pageY+y) + "px",
					"left":  (e.pageX+x)  + "px"
				});
		});
	})
</script>
</head>

<body>
<!--实现简单的相册效果-->
<div id="gallery">
<ul>
    <!--相册所需要的图片集-->
    <li><a href="images/sample1.jpg" class="tooltip" title="喜鹊看花"><img src="images/sample1.jpg"/></a></li>
    <li><a href="images/sample2.jpg" class="tooltip" title="繁花朵朵"><img src="images/sample2.jpg"/></a></li>
    <li><a href="images/sample3.jpg" class="tooltip" title="姹紫嫣红"><img src="images/sample3.jpg"/></a></li>
    <li><a href="images/sample5.jpg" class="tooltip" title="含苞怒放"><img src="images/sample5.jpg"/></a></li>
</ul>		
</div>
</body>
</html>